<template>
  <section class="risk-sys-bill">
    <statistics/>
    <section class="top-line">
      <el-button
        size="small"
        @click="refresh"
        icon="el-icon-refresh"
        type="primary">
        刷新
      </el-button>
    </section>
    <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
            label="编号"
            prop="serialNumber"
            width="100">
        </el-table-column>
        <el-table-column
            prop="companyName"
            label="公司名"
            min-width="150">
        </el-table-column>
        <el-table-column
            prop="industry"
            label="纳税人类型"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="mobile"
            label="手机号"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="weChartAccount"
            label="联系人微信号"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="total"
            label="年度累计开票金额(万)"
            min-width="180">
        </el-table-column>
         <el-table-column
            label="风险等级"
            min-width="100">
            <template slot-scope="scope">
              <span class="green" v-if="scope.row.total < 300">低风险</span>
              <span class="yellow" v-else-if="scope.row.total <= 450">中风险</span>
              <span class="red" v-else>高风险</span>
            </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="150">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.total >= 450"
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="updateDoc(scope.row)">
              更新档案
            </el-button>
          </template>
        </el-table-column>
    </el-table>
    <bills-dialog ref="dialog"/>
  </section>
</template>

<script>
/**
 * @file 一键报税
 */

import statistics from './components/statistics';
import billsDialog from './billsDialog';

export default {
  components: {
    statistics,
    billsDialog
  },
  data() {
    const tableData = [
      {
        companyName: '德昌县蔬菜藏业开发有限公司',
        industry: '小规模纳税人',
        mobile: '13051810202',
        weChartAccount: 'Yly345662',
        total: 453
      },
      {
        companyName: '德昌湧鑫钒业有限公司',
        industry: '小规模纳税人',
        mobile: '15708498737',
        weChartAccount: 'BGY3713912',
        total: 448.2
      },
      {
        companyName: '德昌奥帆商贸有限公司',
        industry: '小规模纳税人',
        mobile: '13981516195',
        weChartAccount: '13981516195',
        total: 431.7
      },
      {
        companyName: '攀枝花尊永商贸有限公司',
        industry: '小规模纳税人',
        mobile: '13980281675',
        weChartAccount: '13980281675',
        total: 381
      },
      {
        companyName: '西昌长丰茶府',
        industry: '小规模纳税人',
        mobile: '15532739282',
        weChartAccount: '15532739282',
        total: 319
      },
      {
        companyName: '德昌旭瑞物流部',
        industry: '小规模纳税人',
        mobile: '13076589896',
        weChartAccount: 'qwe3456',
        total: 288
      },
      {
        companyName: '德昌久钒矿业有限公司',
        industry: '小规模纳税人',
        mobile: '13165498281',
        weChartAccount: 'asdfgh321',
        total: 273
      },
      {
        companyName: '德昌雪岭山泉有限公司',
        industry: '小规模纳税人',
        mobile: '13826253434',
        weChartAccount: '13826253434',
        total: 211
      }
    ];

    tableData.forEach((item, index) => {
      item.serialNumber = this.padding(index + 1, 3);
    });
    return {
      tableData
    };
  },
  mounted() {},
  methods: {
    padding(num, length) {
        for(var len = (num + '').length; len < length; len = num.length) {
            num = '0' + num;            
        }
        return num;
    },

    refresh() {
      this.tableData.forEach(item => {
        item.total += 20;
      });
    },

    updateDoc(rowData) {
      this.$refs.dialog.open(rowData);
    }
  }
};
</script>

<style lang="less" scoped>
.risk-sys-bill {
  padding: 0 10px;
  .red {
    color: #f56c6c;
  }
  .yellow {
    color: #e6a23c;
  }
  .green {
    color: #67c23a;
  }
  .top-line {
    padding-bottom: 10px;
  }
  .pagination {
    text-align: right;
    padding: 20px 0 0;
  }
}
</style>
